<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				box-sizing: border-box;
			}
			
			.box {
				width: 100%;
				height: 600px;
			}
			
			.ul_w {
				width: 15%;
				height: 100%;
				background: gray;
				float: left;
			}
			
			.ul_w>.active {
				background: #757575;
				color: #000000;
			}
			
			.ul_w li {
				font-size: 14px;
				color: #ccc;
				margin: 30px auto;
				border-radius: 10px;
				width: 150px;
				border: 1px solid #000000;
				text-align: center;
				line-height: 35px;
			}
			
			.you_w {
				width: 85%;
				height: 530px;
				float: left;
			}
			
			.you_w>.active {
				display: block;
			}
			
			.you_w>div {
				display: none;
			}
			
			.table {
				width: 90%;
				text-align: center;
				margin-top: 30px;
			}
			
			.table tr td {
				padding: 5px;
			}
			
			.you_w>.diyi>div>input {
				border: none;
				width: 500px;
				border-bottom: 1px solid #cccccc;
				margin-top: 30px;
			}
			
			.you_w>.diyi>div>select {
				width: 300px;
				margin-top: 30px;
			}
			
			.you_w>div>button {
				float: left;
				border: none;
				width: 80px;
				padding: 5px;
				border: 1px solid #cccccc;
				text-align: center;
				font-size: 14px;
				border-radius: 10px;
				background: #ffffff;
				margin-top: 100px;
				margin-right: 30px;
			}
			
			.you_w>.disan>div>input {
				border: none;
				width: 600px;
				border-bottom: 1px solid #cccccc;
				margin-top: 30px;
			}
			
			.you_w>.disan>div>select {
				width: 300px;
				margin-top: 30px;
			}
			
			.butt {
				width: 300px;
				height: 30px;
				margin: 0 auto;
			}
			
			.butt button {
				float: left;
				border: none;
				width: 80px;
				padding: 5px;
				border: 1px solid #cccccc;
				text-align: center;
				font-size: 14px;
				border-radius: 10px;
				background: #ffffff;
				margin-top: 100px;
				margin-right: 60px;
			}
			
			.nod1>div {
				float: left;
				margin-left: 30px;
			}
			
			.nod1>div>input {
				border: none;
				width: 200px;
				border-bottom: 1px solid #cccccc;
			}
			
			.nod1>div>select {
				width: 200px;
			}
			
			.nod2>div {
				float: left;
				margin-left: 30px;
			}
			
			.nod2>div>input {
				border: none;
				width: 200px;
				border-bottom: 1px solid #cccccc;
			}
			
			.nod2>div>select {
				width: 200px;
			}
			
			.nod1 {
				overflow: hidden;
				margin-bottom: 20px;
			}
			
			.nod2 {
				overflow: hidden;
				margin-bottom: 20px;
			}
			
			.span {
				padding: 10px;
			}
			
			.table1 {
				width: 100%;
				text-align: center;
				margin-top: 30px;
			}
			
			.table1 tr td {
				font-size: 14px;
				color: #000;
				padding: 5px;
			}
			
			.table2 {
				width: 100%;
				text-align: center;
				margin-top: 30px;
			}
			
			.table2 tr td {
				font-size: 14px;
				color: #000;
				padding: 5px;
			}
			
			.diyi,.disan{
				width: 600px;
				margin: 20px auto;
			}
			.paixu{
				font-size: 14px;
				color: #000;
			}
			.grays{
				font-size: 15px;
				color: #000;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<ul class="ul_w">
				<li>新建普通频道</li>
				<li>新建自定义频道</li>
				<li>修改频道</li>
				<li>删除频道</li>
			</ul>
			<div class="you_w">
				<!-- 第一个 -->
				<div class="diyi">
					<div class="paixu">名称：<input type="text" /></div>
					<div class="paixu">前台显示：
						<select>
							<option></option>
						</select>
					</div>
					<div class="paixu">排序：<input type="text" /></div>
					<div class="butt">
						<button>创建</button><button>取消</button>
					</div>
				</div>
				<!-- 第二个 -->
				<div class="dier">
					<div class="nod1">
						<div class="paixu">名称：<input type="text" /></div>
						<div class="paixu">前台显示：
							<select>
								<option></option>
							</select>
						</div>
						<div class="paixu">排序：<input type="text" /></div>
					</div>
					<div class="nod2">
						<div class="paixu">搜索：<input type="text" /></div>
						<div class="paixu">类别：专题</div>
						<div class="paixu">状态：已发布</div>
						<div class="paixu" >时间段：<input type="text" /></div>
					</div>
					<div class="span">
						<span class="paixu">搜索结果：</span>
						<table border="1" cellspacing="0" cellpadding="0" class="table1">
							<tr>
								<td class="grays">选择</td>
								<td class="grays">ID</td>
								<td class="grays">标题</td>
								<td class="grays">状态</td>
								<td class="grays">专题ID</td>
								<td class="grays">专题名称</td>
								<td class="grays">专题状态</td>
								<td class="grays">点击数</td>
								<td class="grays">。。。</td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>1</td>
								<td>文章xxxxxxxxx</td>
								<td>待审核</td>
								<td>1</td>
								<td>专题xxxxxxxxx</td>
								<td>待审核</td>
								<td>13</td>
								<td></td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>2</td>
								<td>文章xxxxxxxxx</td>
								<td>待发布</td>
								<td>1</td>
								<td>专题xxxxxxxxx</td>
								<td>待发布</td>
								<td>14</td>
								<td></td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>3</td>
								<td>文章xxxxxxxxx</td>
								<td>待发布</td>
								<td>2</td>
								<td>专题xxxxxxxxx</td>
								<td>已发布</td>
								<td>99</td>
								<td></td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>4</td>
								<td>文章xxxxxxxxx</td>
								<td>待发布</td>
								<td>3</td>
								<td>专题xxxxxxxxx</td>
								<td>待发布</td>
								<td>0</td>
								<td></td>
							</tr>
						</table>
					</div>
					<div class="span">
						<span class="paixu">已加入：</span>
						<table border="1" cellspacing="0" cellpadding="0" class="table2">
							<tr>
								<td>选择</td>
								<td>ID</td>
								<td>标题</td>
								<td>状态</td>
								<td>专题ID</td>
								<td>专题名称</td>
								<td>专题状态</td>
								<td>点击数</td>
								<td>。。。</td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>1</td>
								<td>文章xxxxxxxxx</td>
								<td>待审核</td>
								<td>1</td>
								<td>专题xxxxxxxxx</td>
								<td>待审核</td>
								<td>13</td>
								<td></td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>2</td>
								<td>文章xxxxxxxxx</td>
								<td>待发布</td>
								<td>1</td>
								<td>专题xxxxxxxxx</td>
								<td>待发布</td>
								<td>14</td>
								<td></td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>3</td>
								<td>文章xxxxxxxxx</td>
								<td>待发布</td>
								<td>2</td>
								<td>专题xxxxxxxxx</td>
								<td>已发布</td>
								<td>99</td>
								<td></td>
							</tr>
							<tr>
								<td><input type="checkbox" /></td>
								<td>4</td>
								<td>文章xxxxxxxxx</td>
								<td>待发布</td>
								<td>3</td>
								<td>专题xxxxxxxxx</td>
								<td>待发布</td>
								<td>0</td>
								<td></td>
							</tr>
						</table>
						<div class="butt">
							<button>创建</button><button>取消</button>
						</div>
					</div>

				</div>
				<!-- 第三个 -->
				<div class="diyi">
					<div class="paixu">名称：<input type="text" /></div>
					<div class="paixu">前台显示：
						<select>
							<option></option>
						</select>
					</div>
					<div class="paixu">排序：<input type="text" /></div>
					<div class="butt">
						<button>创建</button><button>取消</button>
					</div>
				</div>
				<!-- 第四个 -->
				<div>

					<h1>暂无数据</h1>

				</div>
				<table border="1" cellspacing="0" cellpadding="0" class="table">
					<tr>
						<td>选择</td>
						<td>ID</td>
						<td>标题</td>
						<td>状态</td>
						<td>专题ID</td>
						<td>专题名称</td>
						<td>专题状态</td>
						<td>点击数</td>
						<td>。。。</td>
					</tr>
					<tr>
						<td><input type="checkbox" /></td>
						<td>1</td>
						<td>文章xxxxxxxxx</td>
						<td>待审核</td>
						<td>1</td>
						<td>专题xxxxxxxxx</td>
						<td>待审核</td>
						<td>13</td>
						<td></td>
					</tr>
					<tr>
						<td><input type="checkbox" /></td>
						<td>2</td>
						<td>文章xxxxxxxxx</td>
						<td>待发布</td>
						<td>1</td>
						<td>专题xxxxxxxxx</td>
						<td>待发布</td>
						<td>14</td>
						<td></td>
					</tr>
					<tr>
						<td><input type="checkbox" /></td>
						<td>3</td>
						<td>文章xxxxxxxxx</td>
						<td>待发布</td>
						<td>2</td>
						<td>专题xxxxxxxxx</td>
						<td>已发布</td>
						<td>99</td>
						<td></td>
					</tr>
					<tr>
						<td><input type="checkbox" /></td>
						<td>4</td>
						<td>文章xxxxxxxxx</td>
						<td>待发布</td>
						<td>3</td>
						<td>专题xxxxxxxxx</td>
						<td>待发布</td>
						<td>0</td>
						<td></td>
					</tr>
				</table>
			</div>

		</div>

		<script src="jquery.js"></script>
		<script type="text/javascript">
			$(function() {　　
				$(".ul_w li").click(function()　　 {　　　　 //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
					　　　　
					$(this).addClass("active").siblings().removeClass("active");　　　　 //获取选中元素的下标
					$('.table').css({
						display: 'none'
					})　　　　
					var index = $(this).index();　　　　
					$(this).parent().siblings().children().eq(index).addClass("active")　　　　.siblings().removeClass("active");　　
				});
			});
		</script>
	</body>

</html>